<template>
    <div class="nav">
        <ul>
            <li v-for="item in iconList" :key="item.id">
                <img :src="item.imgUrl" alt="">
                <span>{{item.title}}</span>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        props: ['iconList']
    }
</script>

<style lang="less" scoped>
.nav {
    ul {
    width: 100%;
    height: 6.25rem;
    padding: 15px 0;
    box-sizing: border-box;
        display: flex;
        justify-content: space-around;
        li {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            img {
                width: 2.375rem;
                height: 2.375rem;
            }
            span {
                font-size: .875rem;
            }
        }
    }
}
</style>